<template>
  <div>
    <!-- 引用我们祖册的全局组件,三级分类组件 利用Props组件通信,利用其判断,是否开启使用我们的分类下拉框 -->
    <Category :scene="scene"></Category>
    <ElCard style="margin: 10px 0px">
      <div v-show="scene == 0">
        <ElButton
          type="primary"
          size="default"
          icon="Plus"
          :disabled="AttrStore.c3ID ? false : true"
          @click="addAttr"
          v-has="'btn.Attr.add'"
          >添加属性
        </ElButton>
        <ElTable style="margin: 10px 0px" border width="100%" :data="attrArr">
          <ElTableColumn label="序号" align="center" type="index" width="100px"></ElTableColumn>
          <ElTableColumn
            label="属性名称"
            width="160px"
            align="center"
            prop="attrName"
          ></ElTableColumn>
          <ElTableColumn label="属性值名称" align="center">
            <template #="{ row, $index }">
              <el-tag v-for="(item, index) in row.attrValueList" :key="item.id" style="margin: 5px">
                {{ item.valueName }}>
              </el-tag>
            </template>
          </ElTableColumn>
          <ElTableColumn label="操作" align="center" width="160px">
            <template #="{ row, $index }">
              <ElButton
                type="primary"
                size="default"
                icon="Edit"
                @click="updataAttr(row)"
                v-has="'btn.Attr.update'"
              ></ElButton>
              <ElButton
                type="primary"
                size="default"
                icon="Delete"
                @click="DelAttr(row)"
                v-has="'btn.Attr.remove'"
              ></ElButton>
            </template>
          </ElTableColumn>
        </ElTable>
      </div>
      <div v-show="scene == 1">
        <!-- 使用行内表单模式,可以让我们一行放多个 -->
        <ElForm :inline="true">
          <el-form-item label="属性名称">
            <el-input type="text" placeholder="请输入属性的名字" v-model="attrParams.attrName" />
          </el-form-item>
        </ElForm>
        <!-- 优化表现,让我们表单中没有值的时候无法使用按钮 -->
        <ElButton type="primary" icon="Plus" :disabled="!attrParams.attrName" @click="addValue">
          添加属性值
        </ElButton>
        <ElButton @click="Cancel">取消</ElButton>
        <ElTable style="margin: 10px 0px" border width="100%" :data="attrParams.attrValueList">
          <ElTableColumn label="序号" align="left" type="index" width="100px"></ElTableColumn>
          <ElTableColumn label="属性值" align="left">
            <template #="{ row, $index }">
              <el-input
                type="text"
                placeholder="请输入属性值"
                v-model="row.valueName"
                v-if="row.flag"
              />
              <div v-else>{{ row.valueName }}</div>
            </template>
          </ElTableColumn>
          <ElTableColumn label="操作" align="left">
            <template #="{ row, $index }">
              <ElButton type="primary" @click="toLook(row)">保存属性</ElButton>
              <ElButton type="primary" @click="toEdit(row)">修改属性</ElButton>
              <ElButton>删除</ElButton>
            </template>
          </ElTableColumn>
        </ElTable>
        <!-- 添加判断,如果我们数组中没有内容,按钮不允许被点击,否则反之 -->
        <ElButton
          type="primary"
          :disabled="attrParams.attrValueList.length > 0 ? false : true"
          @click="save"
          >保存</ElButton
        >
        <ElButton @click="Cancel">取消</ElButton>
      </div>
    </ElCard>
  </div>
</template>

<script lang="ts" setup name="">
import useAttrStore from '@/store/modules/useAttr'
import { onBeforeUnmount, ref, watch } from 'vue'
import useScene1 from './hook/scene1'
import useScene0 from './hook/scene0'
import { Attr } from '@/API/product/attr/type.js'

let scene = ref(0)
let attrArr = ref([])
let attrParams = ref<Attr>({
  attrName: '' /* 新增的属性的名字 */,
  categoryId: '' /* 我们三级分类的ID */,
  categoryLevel: 3 /*三级分类 */,
  attrValueList: [] /* 新增的属性值数组 */
})

const ClearAttrParamsData = () => {
  attrParams.value = {
    attrName: '',
    categoryLevel: 3,
    attrValueList: [],
    /* 在我们点击添加属性按钮时候,清空数据顺便.收集我们的添加属性值要用到三级分类的ID */
    categoryId: AttrStore.c3ID
  }
}
const checkValueName = (row: Attr) => {
  /* 防止出现输入多个空格而不执行的bug 使用trim方法清空字符串中所有的空格 */
  if (row.valueName.trim() === '') {
    ElMessage({ type: 'error', message: '不允许空值' })
    return true
  }
  /*
         防止我们有重复的属性值.利用some数组方法进行筛选
         除了本身的数组以外的数组,与我们当前数组有相同属性值的值
        */
  const isRepeat = attrParams.value.attrValueList.some(
    (item) => item !== row && item.valueName === row.valueName
  )
  if (isRepeat) {
    ElMessage({ type: 'error', message: '不允许重复输入值' })
    return true
  }
  return false
}

const { getAttr, updataAttr, DelAttr, addAttr } = useScene0(
  ClearAttrParamsData,
  scene,
  attrParams,
  attrArr
)
/* 收集新增数据的属性的数据. */
const { Cancel, addValue, save, toLook, toEdit } = useScene1(
  scene,
  getAttr,
  checkValueName,
  attrParams
)

const AttrStore = useAttrStore()
watch(
  () => AttrStore.c3ID,
  () => {
    console.log('运行一次')
    /* 清空仓库 */
    attrArr.value = []
    /* 判断我们如果没有三级分类的元素.我们不获取数据 */
    if (!AttrStore.c3ID) return
    getAttr()
  }
)

/* 在路由组件销毁的时候,把仓库分类相关的数据清空 */
onBeforeUnmount(() => {
  AttrStore.$reset()
})
</script>
<style scoped></style>
